<template>
  <div class="app-main-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        :to="{ path: '/application/applicationCenter' }"
        :replace="true"
        >{{ translate("application") }}</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{ translate("fpcsppz") }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="warnningTip mt20">
      <i class="el-icon-warning-outline" />{{ translate("fpcsppz") }}
    </div>
    <el-form
      ref="ruleForm"
      class="doumee-form"
      :model="param"
      :rules="rules"
      label-width="auto"
      label-suffix="："
    >
      <div class="property-title">{{ translate("invoiceParam") }}</div>
      <el-form-item :label="translate('xsfdwmc')" prop="companyName">
        <el-input
          v-model="param.companyName"
          type="text"
          :placeholder="translate('xsfdwmcPlace')"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item :label="translate('nsrsbh')" prop="nsrsbh">
        <el-input
          v-model="param.nsrsbh"
          type="text"
          :placeholder="translate('nsrsbhPlace')"
          maxlength="50"
        />
      </el-form-item>
      <!-- <el-form-item :label="translate('gszcdz')" prop="dzdh">
        <el-input
          v-model="param.dzdh"
          type="text"
          :placeholder="translate('gszcdzPlace')"
          maxlength="50"
        />
      </el-form-item> -->
      <el-form-item :label="translate('frmc')" prop="kpKpr">
        <el-input
          v-model="param.kpKpr"
          type="text"
          :placeholder="translate('frmcPlace')"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item :label="translate('invoiceMaker')">
        <el-input
          v-model="param.kpKpr"
          type="text"
          :placeholder="translate('invoiceMakerPlace')"
          maxlength="50"
        />
      </el-form-item>
      <!-- <el-form-item :label="translate('sy1')" prop="privateKey">
        <el-input
          v-model="param.privateKey"
          type="text"
          :placeholder="translate('qsr') + translate('sy1')"
          maxlength="50"
        />
      </el-form-item>

      <el-form-item :label="translate('gy1')" prop="publicKey">
        <el-input
          v-model="param.publicKey"
          type="text"
          :placeholder="translate('qsr') + translate('gy1')"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item :label="translate('bm1')" prop="platformAlias">
        <el-input
          v-model="param.platformAlias"
          type="text"
          :placeholder="translate('qsr') + translate('bm1')"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item :label="translate('bm2')" prop="platformCode">
        <el-input
          v-model="param.platformCode"
          type="text"
          :placeholder="translate('qsr') + translate('bm2')"
          maxlength="50"
        />
      </el-form-item> -->
      <!-- <el-form-item :label="translate('password')" prop="password">
        <el-input
          v-model="param.password"
          type="text"
          :placeholder="translate('qsr') + translate('password')"
          maxlength="50"
        />
      </el-form-item> -->

      <!-- <el-form-item :label="translate('businessLicense')" prop="ossUrl">
        <transition name="fade">
          <Cropper
            v-if="dialogCropperVisible"
            :option-img="optionImg"
            :fileinfo="fileinfo"
            use-type="INVOICE_IMG"
            :fixed-number="[32, 32]"
            @formSubmit="cropperSubmit"
            @formClose="cropperClose"
          />
        </transition>
        <el-upload
          class="device-uploader"
          :action="uploadFileUrl"
          :data="uploadData"
          :show-file-list="false"
          accept=".pdf,.jpg,.png"
          :auto-upload="false"
          :on-change="addFileChange"
        >
          <i class="el-icon-plus uploader-icon" />
          <div
            v-show="param.ossUrl"
            class="file"
            :style="'background-image: url(' + param.ossUrl + ')'"
          >
            <div v-if="!param.id" class="delete">
              <i class="el-icon-delete icon" @click.stop="deleteYyzzImage" />
            </div>
          </div>
        </el-upload>
      </el-form-item> -->
      <el-form-item :label="translate('reviewer')" prop="kpFhr">
        <el-input
          v-model="param.kpFhr"
          type="text"
          :placeholder="translate('reviewerPlace')"
          maxlength="50"
        />
      </el-form-item>
      <!-- <el-form-item :label="translate('emailAddr')" prop="contact_email">
        <el-input
          v-model="param.contact_email"
          type="text"
          :placeholder="translate('emailAddrPlace')"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item :label="translate('kaihuhangN')" prop="khhZh">
        <el-input
          v-model="param.khhZh"
          type="text"
          :placeholder="translate('kaihuhangNPlace')"
          maxlength="50"
        />
      </el-form-item> -->
      <!-- <el-form-item :label="translate('payee')" prop="kpSkr">
        <el-input
          v-model="param.kpSkr"
          type="text"
          :placeholder="translate('payeePlace')"
          maxlength="50"
        />
      </el-form-item> -->
      <el-form-item :label="translate('applyFlag')" prop="checkFlag">
        <el-radio-group v-model="param.checkFlag">
          <el-radio label="0">{{ translate("zjkp") }}</el-radio>
          <el-radio label="1">{{ translate("spkp") }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 
      <div class="line-style" />
      <div class="property-title">{{ translate("hardwareInfo") }}</div>
      <el-form-item :label="translate('hardwareDevice')" prop="sbbh">
        <el-input
          v-model="param.sbbh"
          type="text"
          :placeholder="translate('hardwareDevicePlace')"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item :label="translate('UkeyWord')" prop="sbkl">
        <el-input
          v-model="param.sbkl"
          type="text"
          :placeholder="translate('UkeyWordPlace')"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item :label="translate('UkeyzsWord')" prop="sbzskl">
        <el-input
          v-model="param.sbzskl"
          type="text"
          :placeholder="translate('UkeyzsWordP')"
          maxlength="50"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button :loading="subLoading" type="primary" @click="onSubmit">{{
          translate("tj")
        }}</el-button>
      </el-form-item></el-form
    >
  </div>
</template>

<script>
import {
  uploadFile,
  merchantEntry,
  merchantInvoiceInfo,
  merchantInfoUpdate,
} from "@/api";
import Cropper from "@/components/cropper";
export default {
  components: {
    Cropper,
  },
  data() {
    return {
      subLoading: false,
      optionImg: "",
      fileinfo: {},
      dialogCropperVisible: false,
      loding: false,
      time: 60,
      meta: [],
      uploadFileUrl: uploadFile,
      disabled: false,
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          );
        },
      },
      uploadData: {
        folder: "INVOICE_IMG",
        type: "",
      },
      venueId: sessionStorage.getItem("venueId"),
      param: {},
      rules: {
        companyName: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        nsrsbh: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        dzdh: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        kpKpr: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        ossUrl: [
          { required: true, message: this.translate("qsc"), trigger: "change" },
        ],
        privateKey: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        publicKey: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        platformAlias: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        platformCode: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        password: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        contact_email: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        khhZh: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        kpSkr: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        sbbh: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        sbkl: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        sbzskl: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
        checkFlag: [
          { required: true, message: this.translate("qxz"), trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.meta = this.$route.meta.buttons || [];
    this.getDetail();
  },
  methods: {
    // 上传营业执照成功
    yyzzUploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.param, "ossUrl", res.showUrl);
        this.$set(this.param, "yyzz", res.insertUrl);
        this.$refs.ruleForm.clearValidate();
      } else {
        this.$message.error(res.msg || this.translate("scsb"));
      }
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.param, "ossUrl", config.showUrl);
        this.$set(this.param, "yyzz", config.insertUrl);
        this.dialogCropperVisible = false;
        this.$refs.ruleForm.clearValidate();
      } else {
        this.$message.error(config.msg || this.translate("scsb"));
        this.$refs.ruleForm.clearValidate();
        this.dialogCropperVisible = false;
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false;
    },
    async addFileChange(file, fileList) {
      // 上传，拿到file文件
      // this.files = file.raw;
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw);
        this.fileinfo = file.raw;
        this.dialogCropperVisible = true;
      });
    },
    // 删除已上传营业执照
    deleteYyzzImage() {
      this.$set(this.param, "ossUrl", "");
      this.$set(this.param, "yyzz", "");
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.param.venueId = this.venueId;
          const param = { ...this.param };
          param.url = param.yyzz;
          param.fullUrl = param.ossUrl;
          param.contactEmail = param.contact_email;
          this.subLoading = true;
          if (param.id) {
            merchantInfoUpdate({
              param,
            })
              .then((res) => {
                this.subLoading = false;
                if (res.errorCode === "000000") {
                  this.$message.success(this.translate("tjScs"));
                  this.getDetail();
                }
              })
              .catch((err) => {
                this.subLoading = false;
                console.log(err);
              });
          } else {
            merchantEntry({
              param,
            })
              .then((res) => {
                this.subLoading = false;
                if (res.errorCode === "000000") {
                  this.$message.success(this.translate("tjScs"));
                  this.getDetail();
                }
              })
              .catch((err) => {
                this.subLoading = false;
                console.log(err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getDetail() {
      merchantInvoiceInfo({ param: {} })
        .then((res) => {
          if (res.errorCode !== "000000") return;
          if (res.record.id) {
            this.param = res.record;
          } else {
            this.param = {};
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 20px;
}
</style>
